<template>
  <div id="settingSchedule">
    <div class="title"></div>
    <div class="content">
      <div class="setting_page">
        <div class="title">Run Payroll : period<span v-touch-ripple class="close_icon" @click="back">X</span></div>
        <div class="content">
          <p class="select_title">Select a pay schedule for this payroll</p>
          <div class="select_items">
            <el-radio class="schedule_radio" v-for="(item,key) in scheduleList" :key="key"   v-model="payScheduleId"  :label="item.payScheduleId">{{item.scheduleName}}</el-radio>
          </div>
          <div class="btn_group">
            <el-button type="primary" @click="next">Continue</el-button>
            <el-button @click="back">Cancel</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import dPanel from '../../components/common/Panel.vue';

  export default {
    components:{
      dPanel
    },
    data:function(){
      return{
        payScheduleId:null,
      }
    },
    computed:{
      scheduleList(){
        if(this.$store.getters.scheduleList&&this.$store.getters.scheduleList.length){
          this.payScheduleId = this.$store.getters.scheduleList[0].payScheduleId
        }
        return this.$store.getters.scheduleList
      }
    },
    watch:{

    },
    created:function(){
      this.$store.dispatch('getPayScheduleList')
    },
    activated:function(){
      //this.$store.dispatch('getPayScheduleList')
    },
    mounted:function(){

    },
    methods:{
      back:function(){
        this.$router.push('/payRoll/payRollCenter')
      },
      next:function(){

        this.$router.push('/payRoll/payRollCenter/payScheduleInfoEdit/'+this.payScheduleId)
      },
      leave(){


      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  #settingSchedule{
    >.content{
      padding: 0;
    }
  }
  .setting_page {
    min-height: 100%;
    background-color: #fff;
    height: 500px;
    .title {
      line-height: 40px;
      background-color: #ddd;
      padding: 0 12px;
      .close_icon {
        float: right;;
        cursor: pointer;
      }
    }
    .content {
      padding: 40px;
      .select_title {
        color: #333;
        line-height: 80px;
        font-size: 20px;
      }
      .select_items {
        padding: 20px;
        .schedule_radio{
          display: block;
          line-height: 50px;
          margin-left: 0;
        }
      }
      .btn_group {
        margin-top: 40px;
        padding-left: 20px;
      }
    }
  }
</style>
